import routes from "../router";
import tabbar from 'controller/tabbar/index.js';
class Lrouter{
    constructor(options){
        this.$options=options;
        this.$mode=this.$options.mode||"hash";
        this.$routes=this.$options.routes ||[];
        this.current="/";
        this.mapRoutes={};
        this.flag=true;
       
        this.$route={
            query:{},
            path:"/"
        }
        this.init();
    }
    init(){
        this.isMode();
        this.bindEvent();
        this.mapRoutesEvent();
    }
    isMode(){
        if(!window.sessionStorage.getItem("mode")&&this.mode==="hash"){
            window.location.href=window.location.origin+"#/";
            window.sessionStorage.setItem("mode","hash")
        }
    }
    bindEvent(){
        console.log(1)
        console.log(window.location.hash)
        window.addEventListener("load",this.handleBindEventSucc.bind(this))
        if(this.$mode==="hash"){
            window.addEventListener("hashchange",this.handleBindEventSucc.bind(this))
            // window.addEventListener("hashchange", console.log(8888))
        }else if(this.$mode==="history"){
            window.addEventListener("popstate",this.handleBindEventSucc.bind(this))
        }
    }
    handleBindEventSucc(e){
        console.log(2)

        if(this.$mode="hash"){
            let hash=window.location.hash.split("?")[0].slice(1)||"/";
            this.current=hash;
        }else if(this.$mode==="history"){
            let hash=e.state||"/";
            this.current=hash;
        }
        this.getQuery()
        this.randerTemplate();
        
    }
  
    mapRoutesEvent(){
        console.log(3)
        this.$routes.forEach((item)=>{
            this.mapRoutes[item.path]=item;
        })
        console.log(this.mapRoutes)
    }
    randerTemplate(){
        console.log(4)
        if(this.$mode=="history"){
            this.current=window.sessionStorage.getItem("path");
        }
        this.$route.path=this.current;
        var template=this.mapRoutes[this.current].template;
        // 选取当前选中模块的模板
        // 未写flag
        if(this.flag){
            tabbar.init();
            this.flag = false;
        }
        $("#footer").siblings().remove();
        template.render();
    }
    push(path){
        console.log(5)
        if(this.$mode==="hash"){
            window.location.hash=path;
        }else if(this.$mode=="history"){
            window.history.pushState(path,"",path);
            this.current=path.split("?")[0];
            sessionStorage.setItem("path",this.current);
            this.getQuery();
            this.randerTemplate();
        }
    }
    getQuery(){
        var href=window.location.href;
        var obj=href.substr(href.indexOf("?")+1).split("&").reduce(function(prev,item){
            let key=item.split("=")[0];
            let val=item.split("=")[1];
            prev[key]=val;
            return prev;
        },{})
        this.$route.query=obj;
    }
    back(){
        window.history.back();
    }
}

export default Lrouter;